import styled from 'styled-components';
import { Form, Icon, Tooltip } from 'antd';
import React from 'react';

const InputDiv = styled.div`
  //display: flex;
  //width: 100%;
  //align-items: center;
  //background-color: #40a9ff;
`;

// const MLabel = styled.div`
//   height: 40px;
//   width: 220px;
//   display: flex;
//   align-items: center;
//   padding-left: 8px;
//   justify-content: flex-end;
//   padding-right: 8px;
// `;
//
// const RequiredSpan = styled.span`
//   display: inline-block;
//   margin-right: 4px;
//   color: #f5222d;
//   font-size: 14px;
//   font-family: SimSun, sans-serif;
//   line-height: 1;
// `;
//
// const LabelSpan = styled.span`
//   color: rgba(0, 0, 0, 0.85);
//   font-size: 14px;
// `;

// const FormItem = props => {
//   const { form, children, fieldName, label } = props;
//   const { getFieldDecorator } = form;
//   return (
//     <Form.Item label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
//       {getFieldDecorator(fieldName, {})(children)}
//     </Form.Item>
//   );
// };

/**
 * 输入组件
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const MFormItem = props => {
  const {
    fieldName = '',
    label = '',
    required = false,
    form,
    children,
    hint = '',
    initialValue,
  } = props;
  const { getFieldDecorator } = form;
  return (
    <InputDiv>
      {/*<MLabel>*/}
      {/*  {required ? <RequiredSpan>*</RequiredSpan> : null}*/}
      {/*  <LabelSpan>{label}:</LabelSpan>*/}
      {/*</MLabel>*/}
      <Form.Item
        label={label}
        // labelAlign={'left'}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        // style={{ flex: '1' }}
      >
        {children
          ? // 是否有属性名
            fieldName != ''
            ? // 是否有默认值
              initialValue != null || initialValue != undefined
              ? getFieldDecorator(fieldName, {
                  initialValue: initialValue,
                  rules: [{ required: required, message: label != '' ? `请输入${label}` : '' }],
                })(children)
              : getFieldDecorator(fieldName, {
                  rules: [{ required: required, message: label != '' ? `请输入${label}` : '' }],
                })(children)
            : children
          : null}
      </Form.Item>
      {/*更具hint是否为空,显示Icon提示*/}
      {/*{hint && hint != '' ? (*/}
      {/*  <Tooltip placement="top" title={hint}>*/}
      {/*    <Icon type="question-circle" style={{ marginLeft: '10px', cursor: 'pointer' }} />*/}
      {/*  </Tooltip>*/}
      {/*) : (*/}
      {/*  <Icon*/}
      {/*    type="question-circle"*/}
      {/*    style={{ marginLeft: '10px', cursor: 'pointer', visibility: 'hidden' }}*/}
      {/*  />*/}
      {/*)}*/}
    </InputDiv>
  );
};

export default MFormItem;
